<script setup>
import { useRouter } from 'vue-router';
import { getmessagesFn } from '@/api/messages';
import { ref } from 'vue';

const messages = ref([])

getmessagesFn().then(res => {
    console.log(res);
    messages.value = res.data.messages
})

const router = useRouter()

function toback() {
    router.back()
}

</script>

<template>
    <div class="main">
        <van-nav-bar title="通知" left-text="返回" left-arrow @click-left="toback" />
        <div class="content">
            <div v-for="item in messages" class="box">
                <van-icon name="bullhorn-o" size="40px" color="blue" />
                <div>
                    <h2>{{ item.title }}</h2>
                    <small>{{ item.date }}</small>
                    <p>{{ item.text }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.box {
    display: flex;
    line-height: 20px;
    padding: 10px;
    border-bottom: 1px gray solid;

    small {
        color: gray;
    }

    h2,
    p {
        margin: 0;
    }
}
</style>